import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from 'react-router-dom'

function LoginInfo(params) {
  console.log(params)
  if (params.location.state.loginState === 'success') {
    return <Redirect to="/home"></Redirect>
  }
  return <Redirect to="/login"></Redirect>
}

var formCom = () => {
  let pathObj = {
    pathname: '/logininfo',
    state: {
      loginState: 'success'
    }
  }
  return () => (
    <div>
      表单验证
      <Link to={ pathObj }>登录验证后页面</Link>
    </div>
  )
}
class ChildCom extends React.Component {
  clickEvent = () => {
    //console.log(this.props)
    // 返回首页
    // this.props.history.push('/')
    // this.props.history.push('/', { msg: '数据: ChildCom -> Home' })
    // this.props.history.replace('/', { msg: '数据: ChildCom -> Home' })
    // 前进
    // this.props.history.go(1)
    // this.props.history.goForward()
    // 后退
    // this.props.history.go(-1)
    this.props.history.goBack()
  }
  render () {
    return (
      <div>
        <button onClick={ this.clickEvent }>跳转到首页</button>
      </div>
    )
  }
}

class App extends React.Component {
  render () {
    
    return (
      <div>
        {/* <ChildCom></ChildCom> */}
        <Router>
          {/* 匹配成功后, 不会再继续往下匹配, home显示一个; 否则home页面显示两个 */}
          <Switch>
            <Route path="/" exact component={(props) => { console.log(props); return (<div>首页</div>) }}></Route>
            <Route path="/form" exact component={ formCom() }></Route>
            <Route path="/login" exact component={() => (<div>登录页</div>)}></Route>
            <Route path="/home" exact component={() => (<div>主页面1, 登录成功</div>)}></Route>
            <Route path="/home" exact component={() => (<div>主页面2, 登录成功</div>)}></Route>
            <Route path="/logininfo" exact component={ LoginInfo }></Route>
            <Route path="/child" exact component={ ChildCom }></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}

export default App
